<template>
	<div class="user">
		<!-- 个人信息 -->
		<div class="info" @click="gotoEdit">
			<div class="avatar">
				<van-image
					round
					width="100"
					height="100"
					:src="userInfo.head_img | imgUrl"
					fit="cover"
				/>
			</div>
			<div class="msg">
				<p class="username">
					HELLO，
					<!-- 性别 -->
					<i
						class="iconfont iconxingbienan"
						style="color: #0570DB;"
						v-if="userInfo.gender === 1"
					></i>
					<i class="iconfont iconxingbienan" style="color: tomato;" v-else></i>
					<span style="color: #800001;">{{ userInfo.nickname }}</span>
					！
				</p>
				<p class="time">破蛋日：{{ userInfo.create_date | formatTime }}</p>
			</div>
		</div>

		<!-- 表单区域 -->
		<MyCell title="我的关注" value="关注的用户" to="/user_follow"></MyCell>
		<MyCell title="我的跟帖" value="跟帖/回复" to="/user_comment"></MyCell>
		<MyCell title="我的收藏" value="文章/视频" to="/user_star"></MyCell>
		<MyCell title="设置" @click="cellFn"></MyCell>

		<!-- 按钮 -->
		<MyButton @click="exitFn">退出</MyButton>
	</div>
</template>

<script>
import MyCell from '@/components/MyCell.vue';
import MyButton from '@/components/MyButton.vue';
import UserFollow from './UserFollow.vue';
import { getUserInfoAPI } from '@/api/user.js';
import { setToken, getToken, removeToken, removeUserId } from '@/utils/localStorage.js';
export default {
	components: {
		MyCell,
		MyButton,
		UserFollow
	},
	methods: {
		// 设置
		cellFn() {},
		// 退出
		exitFn() {
			this.$dialog
				.confirm({ title: '确认退出？' })
				.then(() => {
					removeToken();
					removeUserId();
					this.$toast.success({
						message: '再见啦',
						onClose: () => this.$router.push({ path: '/login' })
					});
				})
				.catch(() => {});
		},
		gotoEdit() {
			this.$router.push({ path: 'user_edit', query: { id: this.$route.query.id } });
		}
	},
	data() {
		return {
			userInfo: {
				gender: 1,
				nickname: '官方认证火星网友',
				create_date: '2020/1/1',
				head_img: 'https://img01.yzcdn.cn/vant/cat.jpeg'
			}
		};
	},
	async created() {
		// 编程式跳转传入的id
		// console.log(this.$route.query.id);
		const result = (await getUserInfoAPI(this.$route.query.id)).data;
		console.log(result);
		// 数据填充
		if (!result.data) return;
		this.userInfo = result.data;
	}
};
</script>

<style lang="less" scoped>
.info {
	background-color: #ccc;
	color: white;
	height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.avatar {
		overflow: hidden;
		width: 100px;
		height: 100px;
		background-color: pink;
		border-radius: 50%;
		border: 10px solid #ececec;
	}
	.msg {
		margin-top: 10px;
		text-align: center;
		.iconxingbienan {
			color: pink;
		}
		.time {
			margin-top: 5px;
			font-size: 12px;
		}
	}
}
</style>
